<!DOCTYPE html>
<html manifest="manifest.appcache">
	<head>
		
		<title>PaintZ</title>
		<meta property="og:title" content="PaintZ" />
		<meta name="description" content="MS Paint for Chromebooks. Create and edit drawings and other images. Simple, fast, works offline, touch- and mouse-friendly, and no plug-ins required!" />
		<meta property="og:description" content="MS Paint for Chromebooks. Create and edit drawings and other images. Simple, fast, works offline, touch- and mouse-friendly, and no plug-ins required!" />
		<meta property="og:image" content="https://paintz.app/images/og_image.png" />
		<meta property="fb:profile_id" content="1017401634953412" />
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:site" content="@PaintZApp" />
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		
		<link rel="manifest" href="manifest.webapp" />
		
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		
		<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/gdjcnhanmagpjdpilaehedkchegnkdoj" />
		
		<meta name="msapplication-tooltip" content="Create and edit drawings" />
		<meta name="msapplication-navbutton-color" content="#3f51b5" />
		
		<meta name="theme-color" content="#3f51b5" />
		
		<link rel="shortcut icon" type="image/x-icon" href="images/logo/favicon.ico" />
		<link rel="icon" sizes="128x128" href="images/logo/128.png" />
		<link rel="icon" sizes="256x256" href="images/logo/256.png" />
		<link rel="apple-touch-icon-precomposed" sizes="128x128" href="images/logo/128.png" />
		
		<link rel="stylesheet" type="text/css" href="styles/materialz/material-elements.css" />
		<link rel="stylesheet" type="text/css" href="styles/materialz/material-widgets.css" />
		<link rel="stylesheet" type="text/css" href="styles/materialz/material-depth.css" />
		
		<link rel="stylesheet" type="text/css" href="styles/fonts/roboto.css" />
		<link rel="stylesheet" type="text/css" href="styles/splash_screen.css" />
		<link rel="stylesheet" type="text/css" href="styles/layout.css" />
		<link rel="stylesheet" type="text/css" href="styles/toolbars.css" />
		<link rel="stylesheet" type="text/css" href="styles/dialogs.css" />
		<link rel="stylesheet" type="text/css" href="styles/color_picker.css" />
		
		<link rel="stylesheet" type="text/css" href="styles/themes/default.css" id="themeStyleLink" />
		
		<!-- Libraries, helpers, and polyfills -->
		<script type="text/javascript" src="scripts/lib/material-touch.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/lib/canvas-to-blob.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/lib/colorpicker.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/lib/pep.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/lib/promise.auto.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/utils.js" defer="defer"></script>
		
		<!-- Managers -->
		<script type="text/javascript" src="scripts/clipboard.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/keyboard.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/settings.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/undo.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/zoom.js" defer="defer"></script>
		
		<!-- Dialogs -->
		<script type="text/javascript" src="scripts/progress_spinner.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/dialog.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/bottom_sheet.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/about.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/clear.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/color_picker.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/coffee.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/help.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/install.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/keyboard.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/rate.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/resize.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/save.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/settings.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/dialogs/welcome.js" defer="defer"></script>
		
		<!-- Toolbar -->
		<script type="text/javascript" src="scripts/toolbar/toolbox.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/app.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/color_picker.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/dimensions.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/draw_tool_options.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/floating_selection_toolbar.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/image.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/no_tool_options.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/select_tool_options.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/text_tool_options.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/tools.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/zoom.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/toolbar/toolbar.js" defer="defer"></script>
		

		<!-- Drawing tools -->
		<script type="text/javascript" src="scripts/tools/tool.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/drawing.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/shape.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/pencil.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/doodle.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/airbrush.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/line.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/curve.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/rectangle.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/oval.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/eraser.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/floodfill.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/eyedropper.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/selection.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/freeform_selection.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/text.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/pan.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/tools/tools.js" defer="defer"></script>
		
		<!-- Pac-Man easter egg -->
		<script type="text/javascript" src="scripts/pacman.js" defer="defer"></script>
		
		<!-- Core app -->
		<script type="text/javascript" src="scripts/app.js" defer="defer"></script>

		<script type="text/javascript" src="scripts/ros/three.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/ros/eventemitter2.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/ros/roslib.min.js" defer="defer"></script>
		<script type="text/javascript" src="scripts/ros/ros3d.js" defer="defer"></script>

		<script>
  		/**
   		* Setup all visualization elements when the page is loaded. 
   		*/
  		function init() {
    		// Connect to ROS.
    		var ros = new ROSLIB.Ros({
			url : 'ws://192.168.1.158:9090'
    		});

    		// Create the main viewer.
    		var viewer = new ROS3D.Viewer({
      		divID : 'map',
      		width : 800,
      		height : 600,
      		antialias : true
    		});

   		 // Setup the marker client.
    		var gridClient = new ROS3D.OccupancyGridClient({
      		ros : ros,
      		rootObject : viewer.scene
    		});
  		}
		</script>

	</head>
	<body>
		<!-- Top toolbar -->
		<div class="appBar z2" id="toolbar" role="toolbar"></div>
		
		<!-- Image canvas -->
		<canvas class="z1 canvas" id="canvas" width="1" height="1"></canvas>
		<!-- Drawing canvas -->
		<canvas class="canvas" id="preCanvas" width="1" height="1" touch-action="none"></canvas>
		<!-- Grid canvas -->
		<canvas class="canvas" id="gridCanvas" width="1" height="1" touch-action="none"></canvas>
		
		<!-- Bottom toolbar -->
		<div class="appBar z2" id="bottomBar" role="toolbar"></div>
		
		<!-- Dialog containers -->
		<div id="dialogsContainer"></div>
		<div id="bottomSheetsContainer"></div>
		
		<!-- Splash screen -->
		<div id="splashScreen">
			<img src="images/logo/512.png" alt="PaintZ logo" />
			<br />
			<noscript>
				<p>PaintZ requires JavaScript to function.  Please <a href="https://enable-javascript.com" target="_blank">enable JavaScript</a> to use PaintZ.</p>
			</noscript>
			<br />
			<script type="text/javascript">
				document.write('<progress class="circular"></progress>');
			</script>
		</div>
		
		<!-- Invisible elements -->
		<canvas id="cursorCanvas" width="64" height="64"></canvas>
		<audio src="audio/pacman_start.mp3" id="pacManStartSound"></audio>
	</body>
</html>
